<template>
    <div>
        <!-- 封面图 -->
        <div class="banner" :style="articleCover">
            <div class="article-info-container">
                <!-- 文章标题 -->
                <div class="article-title">{{ article.title }}</div>
                <div class="article-info">
                    <div class="first-line">
                        <!-- 发表时间 -->
                        <span>
              <i class="iconfont iconrili"/>
              发表于 {{ article.time | date }}
            </span>
                        <span class="separator">|</span>
                        <!-- 发表时间 -->
                        <span>
              <i class="iconfont icongengxinshijian"/>
              更新于
              <template v-if="article.utime">
                {{ article.utime | date }}
              </template>
              <template v-else>
                {{ article.createTime | date }}
              </template>
            </span>
                        <span class="separator">|</span>
                        <!-- 文章分类 -->
                        <span class="article-category">
              <i class="iconfont iconfenlei1"/>
              <router-link :to="'/categories/' + article.categoryId">
                {{ article.categoryName }}
              </router-link>
            </span>
                    </div>
                    <div class="second-line">
                        <!-- 字数统计 -->
                        <span>
              <i class="iconfont iconzishu"/>
              字数统计: {{ wordNum | num }}
            </span>
                        <span class="separator">|</span>
                        <!-- 阅读时长 -->
                        <span>
              <i class="iconfont iconshijian"/>
              预计阅读时长: {{ readTime }}
            </span>
                    </div>
                    <div class="third-line">
                        <span class="separator">|</span>
                        <!-- 阅读量 -->
                        <span>
              <i class="iconfont iconliulan"/> 阅读量: {{ article.viewsCount }}
            </span>
                        <span class="separator">|</span>
                        <!-- 评论量 -->
                        <span>
              <i class="iconfont iconpinglunzu1"/>评论数:
              <template v-if="count">{{ count }}</template>
              <template v-else>0</template>
            </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <v-row class="article-container">
            <v-col md="9" cols="12">
                <v-card class="article-wrapper">
                    <a @click="speakArticle"><img src="../../assets/png/laba.png" style="width:3%;height:3%"/></a>
                    <a style="float: right;color: #49b1f5;margin-left: 5px" @click="updateArticle(article)"
                       v-if="forms.username===article.author"> <i class="el-icon-edit-outline"
                                                                  style="float: right;color: #49b1f5;margin-top: 5px;margin-left: 5px"></i>
                        编辑</a>
                    <a style="float: right;color: #49b1f5" @click="deleteArticle"
                       v-if="forms.username===article.author"> 删除<i class="el-icon-delete-solid"
                                                                    style="float: right;color: #49b1f5;margin-top: 5px"></i></a>

                    <article
                            id="write"
                            class="article-content markdown-body"
                            v-html="article.content"
                            ref="article"
                    />
                    <!-- 版权声明 -->
                    <div class="aritcle-copyright">
                        <div>
                            <span>文章作者：</span>
                            <a>{{article.author}}</a>
                        </div>
                        <div>
                            <span>文章链接：</span>
                            <a :href="articleHref" target="_blank" style="text-decoration:none">{{ articleHref }} </a>
                        </div>
                        <div>
                            <span>版权声明：</span>本博客所有文章除特别声明外，均采用
                            <a
                                    href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
                                    target="_blank"
                            >
                                CC BY-NC-SA 4.0
                            </a>
                            许可协议。转载请注明文章出处。
                        </div>
                    </div>

                    <a title="收藏" @click="report"> <img style="float:right;width:3%;height:3%;"
                                                        src="../../assets/png/report.png"/></a>

                    <a title="健康" @click="report"> <img style="float:right;width:3%;height:3%;"
                                                        src="../../assets/png/like.png"/></a>
                    <!-- 点赞打赏等 -->
                    <div class="article-reward">
                        <!-- 点赞按钮 -->
                        <a :class="isLike" @click="like" style="background: green">
                            <v-icon size="14" color="#fff" class="test">mdi-thumb-up</v-icon>
                            {{judge}}
                            <span v-show="article.counts > 0">{{
                article.counts
              }}</span>
                        </a>
                        <a class="reward-btn">
                            <!-- 打赏按钮 -->
                            <i class="iconfont iconerweima"/> 打赏
                            <!-- 二维码 -->
                            <div class="animated fadeInDown reward-main">
                                <ul class="reward-all">
                                    <li class="reward-item">
                                        <img
                                                class="reward-img"
                                                :src="require('../../assets/img/wechat.png')"
                                        />
                                        <div class="reward-desc">微信</div>
                                    </li>
                                    <li class="reward-item">
                                        <img
                                                class="reward-img"
                                                :src="require('../../assets/img/alipay.png')"
                                        />
                                        <div class="reward-desc">支付宝</div>
                                    </li>
                                </ul>
                            </div>
                        </a>
                    </div>
                    <div class="pagination-post">

                    </div>

                    <hr/>
                    <!-- 评论 -->
                    <Comment :type="commentType" @getCommentCount="getCommentCount"/>
                </v-card>
            </v-col>
            <!-- 侧边功能 -->
            <v-col md="3" cols="12" class="d-md-block d-none">
                <div style="position: sticky;top: 20px;">
                    <!-- 文章目录 -->
                    <v-card class="right-container">
                        <div class="right-title">
                            <i class="iconfont iconhanbao" style="font-size:16.8px"/>
                            <span style="margin-left:10px">目录</span>
                        </div>
                        <div id="toc"/>
                    </v-card>
                    <!-- 最新文章 -->
                    <v-card class="right-container" style="margin-top:20px">
                        <div class="right-title">
                            <i class="iconfont icongengxinshijian" style="font-size:16.8px"/>
                            <span style="margin-left:10px">最新文章</span>
                        </div>
                        <div class="article-list">
                            <div
                                    class="article-item"
                                    v-for="item of articleList"
                                    :key="item.id"
                            >
                                <a @click="detail(item)" class="content-cover">
                                    <img :src="item.img"/>
                                </a>
                                <div class="content">
                                    <div class="content-title">
                                        <a @click="detail(item)">
                                            {{ item.title }}
                                        </a>
                                    </div>
                                    <div class="content-time">{{ item.createTime | date }}</div>
                                </div>
                            </div>
                        </div>
                    </v-card>
                </div>
            </v-col>
        </v-row>


        <!--弹窗-->
        <el-dialog
                title="举报与反馈"
                :visible.sync="visible"
                width="30%">
            原因：
            <el-radio v-model="reports.due" label="内容重复">内容重复</el-radio>
            <el-radio v-model="reports.due" label="内容错误">内容错误</el-radio>
            <el-radio v-model="reports.due" label="内容非法">内容非法</el-radio>
            <div style="margin-left: 45px">
                <el-radio v-model="reports.due" label="涉嫌引流">涉嫌引流</el-radio>
                <el-radio v-model="reports.due" label="内容过期">内容过期</el-radio>
                <el-radio v-model="reports.due" label="其他">其他</el-radio>
            </div>
            <br/>
            <br/>
            <div style="display: flex">
                <div>详情：</div>
                <div style="width:80%;height:40%">
                    <el-input size="medium" type="textarea" maxlength="30"
                              show-word-limit
                              v-model="reports.detail" placeholder="请详细说明举报原因"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="addReport">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import Clipboard from "clipboard";
    import Comment from "../../components/Comment";
    import tocbot from "tocbot";
    import request from '../../utils/request'

    let id
    let flag = 0
    export default {
        components: {
            Comment
        },
        created() {

            let str = sessionStorage.getItem("user")
            this.forms = JSON.parse(str)
            request.get("/article/articleNew/"+this.forms.username).then(res => {
                this.articleList = res.data
            })
            id = this.$route.query

            sessionStorage.setItem("ID", id.id)
            //判断是否点赞
            if (!this.judge) {
                this.judge = "点赞"
            }
            this.listArticle()
        },

        data: function () {
            return {
                //举报
                reports: {
                    detail: '',
                    due: ''
                },
                visible: false,
                commentCount: 0,
                commentType: 1,
                judge: "",
                //判断是否点赞
                likeList: {},
                countss: '',
                likes: {},
                config: {
                    sites: ["qzone", "wechat", "weibo", "qq"]
                },
                forms: {},
                imgList: [],
                form: {},
                articleList: [],
                article: {
                    update_time: ''
                    /*nextArticle: {
                      id: 0,
                      articleCover: ""
                    },
                    lastArticle: {
                      id: 0,
                      articleCover: ""
                    },*/
                    // articleRecommendList: []
                },
                articleLatestList: [],
                commentList: [],
                count: 0,
                wordNum: "",
                readTime: "",
                articleHref: window.location.href,
                clipboard: null,
                soundName: "xiaofeng",
            };
        },
        methods: {
            //读
            speakArticle() {
                if (flag ==0){
                request.get("/queryOne/" + this.$route.query.id).then(res => {
                    console.log(res.code)
                    ++flag;
                })
                }else{
                    request.get("/stop").then(res => {
                        console.log(res)
                    })
                    --flag
                }
            },
            //举报
            addReport() {
                this.reports.articleId = this.article.id
                this.reports.articleName = this.article.title
                //举报者
                this.reports.username = this.forms.username
                //被举报者
                this.reports.author = this.article.author
                console.log(this.reports.detail)
                if (this.reports.due === "其他") {
                    if (this.reports.detail === '') {
                        this.$toast({
                            type: 'warnning',
                            message: '请填写举报内容'
                        })
                        return
                    }

                } else {
                    if (this.reports.due === '') {
                        this.$toast({
                            type: 'warnning',
                            message: '请选择原因'
                        })
                        return
                    }

                    request.post('/report/addReport', this.reports).then(res => {
                        console.log(res)
                        if (res.code == 20000) {

                            this.$toast({
                                type: 'success',
                                message: '举报成功，万分感谢！'
                            })
                            this.visible = false
                            this.reports = {}
                        }


                    })
                }

            },
            //举报弹窗
            report() {
                this.visible = true;
            },
            listArticle() {

                request.get("/likes/selectOneikes/" + id.id + "/" + this.forms.username).then(result => {

                    this.likeList = result.data
                    if (this.likeList.flag === 1) {
                        this.judge = "已点赞"

                    }

                })


                //赋值
                request.get('/article/query/' + id.id).then(data => {

                    const that = this;
                    document.title = data.data.title;

                    //将markdown转换为Html
                    this.markdownToHtml(data.data);
                    this.$nextTick(() => {
                        // 统计文章字数
                        this.wordNum = this.deleteHTMLTag(this.article.content).length;
                        // 计算阅读时间
                        this.readTime = Math.round(this.wordNum / 400) + "分钟";
                        // 添加代码复制功能
                        this.clipboard = new Clipboard(".copy-btn");
                        this.clipboard.on("success", () => {
                            this.$toast({type: "success", message: "复制成功"});
                        });
                        // 添加文章生成目录功能
                        let nodes = this.$refs.article.children;
                        if (nodes.length) {
                            for (let i = 0; i < nodes.length; i++) {
                                let node = nodes[i];
                                let reg = /^H[1-4]{1}$/;
                                if (reg.exec(node.tagName)) {
                                    node.id = i;
                                }
                            }
                        }
                        tocbot.init({
                            tocSelector: "#toc", //要把目录添加元素位置，支持选择器
                            contentSelector: ".article-content", //获取html的元素
                            headingSelector: "h1, h2, h3", //要显示的id的目录
                            hasInnerContainers: true,
                            onClick: function (e) {
                                e.preventDefault();
                            }
                        });
                        // 添加图片预览功能
                        const imgList = this.$refs.article.getElementsByTagName("img");
                        for (var i = 0; i < imgList.length; i++) {
                            this.imgList.push(imgList[i].src);
                            imgList[i].addEventListener("click", function (e) {
                                that.previewImg(e.target.currentSrc);
                            });
                        }
                    });
                });

            },
            getCommentCount(count) {
                this.commentCount = count;
            },
            //编辑文章
            updateArticle(ids) {
                let id = ids.id
                this.$router.push({
                    path: '/update/',
                    query: {id: id}
                })

            },//删除文章
            deleteArticle() {

                this.$confirm('你确定要删除,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete('/article/deleteArticle/' + this.article.id).then(res => {
                        if (res.code === 20000) {
                            this.$toast({type: 'success', message: '删除成功!'})
                            this.$router.push("/");
                        }
                    })
                }).catch(() => {
                    this.$toast({type: 'success', message: '已取消删除'})
                })


            },
            detail(ids) {
                let id = ids.id
                if (ids.author === this.forms.username && ids.flag === false) {
                    this.$router.push({
                        path: '/articles/',

                        query: {id: id}
                    })

                } else if (ids.flag === false) {
                    this.$toast({
                        message: '博主已加密',
                        type: 'warnning'
                    })
                    return
                }else if (ids.isEnable===false){
                    this.$toast({
                        message: '该文章已被封禁,请联系管理员',
                        type: 'warnning'
                    })
                    return
                }

                this.$router.push({
                    path: '/articles/',

                    query: {id: id}
                })


            },

            listComment() {
                /*  const path = this.$route.path;
                  const arr = path.split("/");
                  const articleId = arr[arr.length - 1];*/
                request.get("/comment/list").then(res => {
                    console.log(res)
                    this.commentList = res.data;
                    this.count = res.data.length;
                })

            },
            like() {

                request.get("/likes/selectOneikes/" + this.article.id + "/" + this.forms.username).then(res => {

                    if (res.data === null) {
                        this.likes.foreignId = this.article.id
                        this.likes.liker = this.forms.username
                        this.likes.author = this.article.author
                        this.likes.articleName = this.article.title
                        request.post("/likes/addLikes", this.likes).then(result => {
                            if (result.code === 20000) {

                                this.article.counts = this.article.counts + 1
                                request.put("/article/updateCount", this.article).then(re => {
                                    this.$toast({
                                        type: 'success',
                                        message: '点赞成功'
                                    })
                                    this.listArticle()

                                    console.log(re.code)

                                })
                            }

                        })
                    }
                    else {
                        request.delete("/likes/deleteLikes/" + this.article.id + "/" + this.forms.username).then(res1 => {
                            if (res1.code === 20000) {

                                this.article.counts = this.article.counts - 1
                                request.put("/article/updateCount", this.article).then(re => {
                                    this.$toast({
                                        type: 'success',
                                        message: '取消点赞'
                                    })
                                    this.judge = "点赞"
                                    this.listArticle()
                                    console.log(re)

                                })
                            }
                        })
                    }
                })


            },
            markdownToHtml(article) {
                const MarkdownIt = require("markdown-it");
                const hljs = require("highlight.js");
                const md = new MarkdownIt({
                    html: true,
                    linkify: true,
                    typographer: true,
                    highlight: function (str, lang) {
                        // 当前时间加随机数生成唯一的id标识
                        var d = new Date().getTime();
                        if (
                            window.performance &&
                            typeof window.performance.now === "function"
                        ) {
                            d += performance.now();
                        }
                        const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                            /[xy]/g,
                            function (c) {
                                var r = (d + Math.random() * 16) % 16 | 0;
                                d = Math.floor(d / 16);
                                return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
                            }
                        );
                        // 复制功能主要使用的是 clipboard.js
                        let html = `<button class="copy-btn iconfont iconfuzhi" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}"></button>`;
                        const linesLength = str.split(/\n/).length - 1;
                        // 生成行号
                        let linesNum = '<span aria-hidden="true" class="line-numbers-rows">';
                        for (let index = 0; index < linesLength; index++) {
                            linesNum = linesNum + "<span></span>";
                        }
                        linesNum += "</span>";
                        if (lang && hljs.getLanguage(lang)) {
                            // highlight.js 高亮代码
                            const preCode = hljs.highlight(lang, str, true).value;
                            html = html + preCode;
                            if (linesLength) {
                                html += '<b class="name">' + lang + "</b>";
                            }
                            // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "<" 代替，不影响复制功能
                            return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;color: white"  id="copy${codeIndex}">${str.replace(
                                /<\/textarea>/g,
                                "</textarea>"
                            )}</textarea>`;
                        }
                    }
                });
                // 将markdown替换为html标签
                article.content = md.render(article.content);
                this.article = article;
                this.countss = this.article.counts

            },
            previewImg(img) {
                this.$imagePreview({
                    images: this.imgList,
                    index: this.imgList.indexOf(img)
                });
            },
            deleteHTMLTag(content) {
                return content
                    .replace(/<\/?[^>]*>/g, "")
                    .replace(/[|]*\n/, "")
                    .replace(/&npsp;/gi, "");
            }
        },
        computed: {
            articleCover() {
                return (
                    "background: url(" +
                    this.article.img +
                    ") center center / cover no-repeat"
                );
            },
            isLike() {
                var articleLikeSet = this.$store.state.articleLikeSet;
                return articleLikeSet.indexOf(this.article.id) != -1
                    ? "like-btn-active"
                    : "like-btn";
            },
            isFull() {
                return function (id) {
                    return id ? "post full" : "post";
                };
            }
        }
    };
</script>

<style scoped>
    .banner:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);

    }

    .article-info i {
        font-size: 14px;
    }

    .article-info {
        font-size: 14px;
        line-height: 1.9;
        display: inline-block;
    }

    @media (min-width: 760px) {
        .banner {
            color: #eee !important;
        }

        .article-info span {
            font-size: 95%;
        }

        .article-info-container {
            position: absolute;
            bottom: 6.25rem;
            padding: 0 8%;
            width: 100%;
            text-align: center;
        }

        .second-line,
        .third-line {
            display: inline;
        }

        .article-title {
            font-size: 35px;
            margin: 20px 0 8px;
        }

        .pagination-post {
            display: flex;
        }

        .post {
            width: 50%;
        }

        .recommend-item {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin: 3px;
            width: calc(33.333% - 6px);
            height: 200px;
            background: #000;
            vertical-align: bottom;
        }
    }

    @media (max-width: 759px) {
        .banner {
            color: #eee !important;
            height: 360px;
        }

        .article-info span {
            font-size: 90%;
        }

        .separator:first-child {
            display: none;
        }

        .blog-container {
            margin: 322px 5px 0 5px;
        }

        .article-info-container {
            position: absolute;
            bottom: 1.3rem;
            padding: 0 5%;
            width: 100%;
            color: #eee;
            text-align: left;
        }

        .article-title {
            font-size: 1.5rem;
            margin-bottom: 0.4rem;
        }

        .post {
            width: 100%;
        }

        .pagination-post {
            display: block;
        }

        .recommend-item {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin: 3px;
            width: calc(100% - 4px);
            height: 150px;
            margin: 2px;
            background: #000;
            vertical-align: bottom;
        }
    }

    .article-content {

        word-break: break-word;
        font-size: 14px;
        line-height: 2;
    }

    .article-operation {
        display: flex;
        align-items: center;
    }

    .article-category a {
        color: #fff !important;
    }

    .tag-container a {
        display: inline-block;
        margin: 0.5rem 0.5rem 0.5rem 0;
        padding: 0 0.75rem;
        width: fit-content;
        border: 1px solid #49b1f5;
        border-radius: 1rem;
        color: #49b1f5 !important;
        font-size: 12px;
        line-height: 2;
    }

    .tag-container a:hover {
        color: #fff !important;
        background: #49b1f5;
        transition: all 0.5s;
    }

    .aritcle-copyright {
        position: relative;
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 0.875rem;
        line-height: 2;
        padding: 0.625rem 1rem;
        border: 1px solid #eee;
    }

    .aritcle-copyright span {
        color: #49b1f5;
        font-weight: bold;
    }

    .aritcle-copyright a {
        text-decoration: underline !important;
        color: #99a9bf !important;
    }

    .aritcle-copyright:before {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
        background: #49b1f5;
        content: "";
    }

    .aritcle-copyright:after {
        position: absolute;
        top: 0.95rem;
        right: 0.95rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.5em;
        background: #fff;
        content: "";
    }

    .article-reward {
        margin-top: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reward-btn {
        position: relative;
        display: inline-block;
        width: 100px;
        background: #49b1f5;
        margin: 0 1rem;
        color: #fff !important;
        text-align: center;
        line-height: 36px;
        font-size: 0.875rem;
    }

    .reward-btn:hover .reward-main {
        display: block;
    }

    .reward-main {
        display: none;
        position: absolute;
        bottom: 40px;
        left: 0;
        margin: 0;
        padding: 0 0 15px;
        width: 100%;
    }

    .reward-all {
        display: inline-block;
        margin: 0 0 0 -110px;
        padding: 20px 10px 8px !important;
        width: 320px;
        border-radius: 4px;
        background: #f5f5f5;
    }

    .reward-all:before {
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 20px;
        content: "";
    }

    .reward-all:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 2px;
        left: 0;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-top: 13px solid #f5f5f5;
        border-right: 13px solid transparent;
        border-left: 13px solid transparent;
    }

    .reward-item {
        display: inline-block;
        padding: 0 8px;
        list-style-type: none;
    }

    .reward-img {
        width: 130px;
        height: 130px;
        display: block;
    }

    .reward-desc {
        margin: -5px 0;
        color: #858585;
        text-align: center;
    }

    .like-btn {
        display: inline-block;
        width: 100px;
        background: #969696;
        color: #fff !important;
        text-align: center;
        line-height: 36px;
        font-size: 0.875rem;
    }

    .like-btn-active {
        display: inline-block;
        width: 100px;
        background: #ec7259;
        color: #fff !important;
        text-align: center;
        line-height: 36px;
        font-size: 0.875rem;
    }

    .pagination-post {
        margin-top: 40px;
        overflow: hidden;
        width: 100%;
        background: #000;
    }

    .post {
        position: relative;
        height: 150px;
        overflow: hidden;
    }

    .post-info {
        position: absolute;
        top: 50%;
        padding: 20px 40px;
        width: 100%;
        transform: translate(0, -50%);
        line-height: 2;
        font-size: 14px;
    }

    .post-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        transition: all 0.6s;
        object-fit: cover;
    }

    .post a {
        position: relative;
        display: block;
        overflow: hidden;
        height: 150px;
    }

    .post:hover .post-cover {
        opacity: 0.8;
        transform: scale(1.1);
    }

    .label {
        font-size: 90%;
        color: #eee;
    }

    .post-title {
        font-weight: 500;
        color: #fff;
    }

    hr {
        position: relative;
        margin: 40px auto;
        border: 2px dashed #d2ebfd;
        width: calc(100% - 4px);
    }

    .full {
        width: 100% !important;
    }

    .right-container {
        padding: 20px 24px;
        font-size: 14px;
    }

    .right-title {
        display: flex;
        align-items: center;
        line-height: 2;
        font-size: 16.8px;
        margin-bottom: 6px;
    }

    .right-title i {
        font-weight: bold;
    }

    .recommend-container {
        margin-top: 40px;
    }

    .recommend-title {
        font-size: 20px;
        line-height: 2;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .recommend-cover {
        width: 100%;
        height: 100%;
        opacity: 0.4;
        transition: all 0.6s;
        object-fit: cover;
    }

    .recommend-info {
        line-height: 2;
        color: #fff;
        position: absolute;
        top: 50%;
        padding: 0 20px;
        width: 100%;
        transform: translate(0, -50%);
        text-align: center;
        font-size: 14px;
    }

    .recommend-date {
        font-size: 90%;
    }

    .recommend-item:hover .recommend-cover {
        opacity: 0.8;
        transform: scale(1.1);
    }

    .article-item {
        display: flex;
        align-items: center;
        padding: 6px 0;
    }

    .article-item:first-child {
        padding-top: 0;
    }

    .article-item:last-child {
        padding-bottom: 0;
    }

    .article-item:not(:last-child) {
        border-bottom: 1px dashed #f5f5f5;
    }

    .article-item img {
        width: 100%;
        height: 100%;
        transition: all 0.6s;
        object-fit: cover;
    }

    .article-item img:hover {
        transform: scale(1.1);
    }

    .content {
        flex: 1;
        padding-left: 10px;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    .content-cover {
        width: 58.8px;
        height: 58.8px;
        overflow: hidden;
    }

    .content-title a {
        transition: all 0.2s;
        font-size: 95%;
    }

    .content-title a:hover {
        color: #2ba1d1;
    }

    .content-time {
        color: #858585;
        font-size: 85%;
        line-height: 2;
    }
</style>

<style lang="scss">
    pre.hljs {
        padding: 12px 2px 12px 40px !important;
        border-radius: 5px !important;
        position: relative;
        font-size: 14px !important;
        line-height: 22px !important;
        overflow: hidden !important;
        &:hover .copy-btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        code {
            display: block !important;
            margin: 0 10px !important;
            overflow-x: auto !important;
            &::-webkit-scrollbar {
                z-index: 11;
                width: 6px;
            }
            &::-webkit-scrollbar:horizontal {
                height: 6px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                width: 6px;
                background: #666;
            }
            &::-webkit-scrollbar-corner,
            &::-webkit-scrollbar-track {
                background: #1e1e1e;
            }
            &::-webkit-scrollbar-track-piece {
                background: #1e1e1e;
                width: 6px;
            }
        }
        .line-numbers-rows {
            position: absolute;
            pointer-events: none;
            top: 12px;
            bottom: 12px;
            left: 0;
            font-size: 100%;
            width: 40px;
            text-align: center;
            letter-spacing: -1px;
            border-right: 1px solid rgba(0, 0, 0, 0.66);
            user-select: none;
            counter-reset: linenumber;
            span {
                pointer-events: none;
                display: block;
                counter-increment: linenumber;
                &:before {
                    content: counter(linenumber);
                    color: #999;
                    display: block;
                    text-align: center;
                }
            }
        }
        b.name {
            position: absolute;
            top: 7px;
            right: 45px;
            z-index: 1;
            color: #999;
            pointer-events: none;
        }
        .copy-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 1;
            color: #ccc;
            background-color: #525252;
            border-radius: 6px;
            display: none;
            font-size: 14px;
            width: 32px;
            height: 24px;
            outline: none;
        }
    }

    .test:hover {
        background: green;
        transform: scale(1.5);
        transition: 0.5s all;

    }
</style>
